<template>
  <div>
    <div class="activation-form">
      <div class="title">
        {{ companyName }}邀请你加入组织
      </div>
      <div style="text-align: center;margin-bottom: 20px">
        <el-checkbox v-model="isAgree" label="true">我同意加入组织。并接受beetles<a href="http://www.baidu.com">使用条款</a>和
          <a href="http://www.baidu.com">隐私政策</a>中规定的条款。

        </el-checkbox>
      </div>
      <div style="text-align: center;margin: 0 auto;width: 80%">
        <div v-show="isAgree" style="margin-bottom:30px;font-size: 13px;color: #606266">欢迎你加入Beetles, 首次登陆请设置您的密码</div>
        <avue-form v-show="isAgree" ref="form" v-model="form" :option="option">
          <template slot="menuForm">
            <el-button style="margin-left: 70%" icon="el-icon-user" type="primary" @click="onSubmit">确 认 激 活</el-button>
          </template>
        </avue-form>
      </div>

    </div>

  </div>
</template>

<script>
import {activationPassword} from "@/api/user.js"


export default {
  name: 'activation',
  props: [],
  data() {
    var validatePassWord = (rule, value, callback) => {
      const passwordReg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d]{8,16}$/
      if (value === '') {
        callback(new Error('请输入密码'));
      } else if (!passwordReg.test(value)) {
        callback(new Error('至少1个大写字母，1个小写字母和1个数字,不能包含特殊字符（非数字字母）!'))
      } else {
        callback()
      }
    }

    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    }
    return {
      companyName: '',
      isAgree: false,
      form: {
        password: null,
        userId: null,
      },
      option: {
        emptyBtn: false,
        submitBtn: false,
        column: [{
          label: '密码',
          id:'password',
          prop: "password",
          type: "password",
          span: 24,
          rules: [{
            required: true,
            message: "请输入密码",
            trigger: "blur",
          }, {
            min: 7,
            max: 16,
            message: "请输入最小8位最大16位的密码"
          }, {
            validator: validatePassWord, trigger: 'blur'
          }]
        },
          {
            label: '确认密码',
            prop: "confirmPassword",
            id:'confirmPassword',
            type: "password",
            span: 24,
            rules: [{required: true,message:"请再次输入密码",trigger: "blur",},{validator: validatePass, trigger: 'blur'}]
          },
        ]
      }
    }
  },
  created() {
    if (this.$route.query.userId) {
      if (this.$route.query.userId.charAt(this.$route.query.userId.length - 1) == '/') {
        this.form.userId = this.$route.query.userId.split('/')[0]
      } else {
        this.form.userId = this.$route.query.userId

      }
    }
    if (this.$route.query.name) {
      if (this.$route.query.name.charAt(this.$route.query.name.length - 1) == '/') {
        this.companyName = new Buffer(this.$route.query.name.split('/')[0], 'base64')
      } else {
        this.companyName = new Buffer(this.$route.query.name, 'base64')

      }
    }
  },
  methods: {
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          activationPassword(this.form.password, this.form.userId).then((res) => {
            this.$message({
              type: 'success',
              message: '激活成功！'
            })
            //通过跳转到首页
            if (res.data.code == 200) {
              setTimeout(() => {
                this.$router.push({path: '/login'})
              }, 3000)
            }
          })
        }
      })
    },
  }
}
</script>
<style>
.activation-form {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  font-size: 16px;
  margin-top: 50px;
  box-shadow: 2px 2px 19px 2px rgba(0, 0, 0, 0.18);
  padding: 15px;;
}

.title {
  width: 100%;
  font-family: Montserrat;
  font-size: 25px;
  font-weight: 800;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #51abe0;
  margin: 0 auto;
  margin-bottom: 15px;
}

a {
  color: #00a2ff;
}
</style>
